<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-08-30 10:22:31
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-08-30 10:22:31
 * @projectName: HeBeiHaiYangBeiDaiHeData
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="loginBox">
    <main class="loginBox__bg">
      <aside class="loginBox__bg__left">
        <div class="loginBox__bg__left-logo" />
        <div class="login-txt">河北省海洋生态环境监测与分析系统</div>
      </aside>
      <section class="loginBox__bg__right">
        <h4 class="no-margins">欢迎登录</h4>
        <el-form ref="loginFormRef" label-position="top" :model="loginForm" :rules="loginRules">
          <el-form-item prop="username" label="用户名">
            <div class="txtb">
              <el-input v-model="loginForm.username" type="text" placeholder="请输入用户名" autocomplete="off"
                :class="{ focus: add }" @focus="add = true" @blur="add = loginForm.username !== ''" clearable
                @keyup.enter.native="handleLogin(loginFormRef)" />
            </div>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <div class="txtb">
              <el-input ref="password" :key="passwordType" v-model="loginForm.password" autocomplete="off" clearable
                placeholder="请输入登录密码" :type="passwordType" :class="{ focus: add1 }" @focus="add1 = true"
                @blur="add1 = loginForm.password !== ''" @keyup.enter.native="handleLogin(loginFormRef)" />
              <!-- 密码 -->
              <span v-if="loginForm.password" class="show-pwd iconfont" @click="showPwd"
                v-html="passwordType === 'password' ? '&#xe603;' : '&#xe602;'" />
            </div>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="code" class="verificationCode__box" label="验证码">
            <div class="verifCode_box">
              <el-input v-model="loginForm.code" type="text" placeholder="请输入验证码" autocomplete="off"
                :class="{ focus: add2 }" @focus="add2 = true" @blur="add2 = loginForm.code !== ''" clearable
                @keyup.enter.native="handleLogin(loginFormRef)" />
            </div>
            <div class="verification__imageBox flex-container" @click="switchCodeHandler">
              <!-- 这里放验证码 -->
              <img class="imgBox_container" :src="switchCodeImg" alt="">
            </div>
          </el-form-item>
          <el-form-item class="regist_pasword" style="margin-top: 10px">
            <el-checkbox label="记住密码" />
          </el-form-item>
          <el-form-item class="loginbtn__el-form-item">
            <el-button class="loginbtn w-70" :loading="loading" type="primary" @click="handleLogin(loginFormRef)">{{
              loginText
            }}</el-button>
          </el-form-item>
        </el-form>
      </section>
    </main>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { userStores } from '@/stores/modules/user'
import { rulesLoginFormVO } from '@/interface'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter, type Router } from 'vue-router'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const useUserStore = userStores() // 用户相关仓库
const { userInfo } = storeToRefs(useUserStore); // 用户仓库全局变量
const router: Router = useRouter();
const add = ref<boolean>(false)
const add1 = ref<boolean>(false)
const add2 = ref<boolean>(false)
const loading = ref<boolean>(false) // 按钮loading
const password = ref(null)
const passwordType = ref<string>('password') // 密码类型
const loginText = ref<string>('登 录') // 密码类型
const switchCodeImg = ref<string>('') // 验证码图片
const loginFormRef = ref<FormInstance>() // 表单实例
const loginForm = reactive<rulesLoginFormVO>({
  username: 'bdhgly',
  password: 'lvchuang@123',
  code: '',
}) // 表单绑定数据
const loginRules = reactive<FormRules<rulesLoginFormVO>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}) // 表单校验
onMounted(() => {
  switchCodeHandler()
})
/**
 * 确定登录处理方法
 */
const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      loginText.value = '正在登录中'
      useUserStore.login(loginForm).then(res => {
        loading.value = false
        loginText.value = '登录成功'
        router.push({ path: '/' })
      }).catch(() => {
        loading.value = false
        loginText.value = '登 录'
        loginForm.code = ''
        switchCodeHandler()
      })
    } else {
      console.log(fields)
    }
  })
}
/**
 * 切换显示验证码
 */
const switchCodeHandler = () => {
  const info = {
    h: 60,
    V1: 4,
    w: 175
  }
  const randomNum = Math.floor(Math.random() * 10 + 1)
  switchCodeImg.value = `${import.meta.env.VITE_BASE_API}` + `/admin/user/getVerify.do?h=${info.h}&V1=${info.V1}&w=${info.w}&random=${randomNum}`
}
const showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
  nextTick(() => {
    password.value.focus()
  })
}
</script>
<style lang="scss">
@import "@/assets/styles/login.scss";
</style>
